<template>
  <div class="product-list">
    <!-- 筛选控件 -->
    <div class="filter-section">
      <el-select
        v-model="selectedCategory"
        :popper-class="selectedCategoryPopperClass"
        placeholder="选择类别"
        class="select"
      >
        <el-option
          v-for="category in categories"
          :key="category.value"
          :label="category.label"
          :value="category.value"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 产品列表 -->
    <div class="products">
      <el-row :gutter="20">
        <el-col :span="6" v-for="product in filteredProducts" :key="product.id">
          <router-link :to="`/products/${product.id}`">
            <el-card>
              <img :src="product.images[0]" class="product-image" alt="Product image" />
              <div>
                <h3 class="product-name">{{ product.name }}</h3>
                <p class="product-description">{{ product.description }}</p>
                <div class="product-price">${{ product.price }}</div>
              </div>
            </el-card>
          </router-link>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { useProductStore } from '../stores/productStore';
import { ref, computed } from 'vue';

const productStore = useProductStore();
productStore.fetchProducts();

const selectedCategory = ref('');
const categories = ref([
  { value: 'electronic_devices', label: '电子设备' },
  { value: 'accessories', label: '配件' },
]);

// 计算属性用于获取当前所选类别的标签文本
const selectedCategoryLabel = computed(() => {
  return selectedCategory.value
 ? categories.value.find(category => category.value === selectedCategory.value).label
    : '';
});

// 计算属性用于生成自定义的popper-class名称，确保唯一性
const selectedCategoryPopperClass = computed(() => {
  return `custom-popper-${selectedCategory.value}`;
});

const filteredProducts = computed(() => {
  return selectedCategory.value
 ? productStore.products.filter(p => p.category === selectedCategory.value)
    : productStore.products;
});
</script>

<style scoped>
.product-list {
  margin-top: 30px; /* 增加与上方内容的间距 */
  padding: 20px; /* 增加内边距，使组件在页面中有一定的空间感 */
  background-color: #fff; /* 将背景色改为白色，与页面整体风格协调 */
  border-radius: 10px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.filter-section {
  margin-bottom: 20px; /* 增加筛选控件与产品列表之间的间距 */
  text-align: right; /* 让筛选控件靠右显示 */

  /* 让内部元素靠右对齐且有一定间距 */
  display: flex;
  justify-content: flex-end;
}

.select {
  /* 设置下拉框的基本样式 */
  padding: 8px 15px;
  font-size: 16px;
  color: #666;
  transition: background-color 0.3s ease;
  width: 500px;
  background-color: #f9f9f9;
  
  text-align: left;
}


.products {
 
  display: flex;
  flex-wrap: wrap; /* 允许产品卡片换行，适应不同屏幕宽度 */
  justify-content: space-between; /* 让产品卡片均匀分布在容器内，避免拥挤 */

  /* 增加间距，使卡片之间不那么拥挤 */
  gap: 20px;
  /* 设置最大宽度，避免在大屏幕上过度展开 */
  max-width: 100%;
}

.product-image {
  width: 100%; /* 让图片宽度占满卡片宽度，保持比例的同时填满空间 */
  height: auto;
  border-radius: 5px;
  object-fit: cover;

  /* 添加以下属性，使图片在垂直方向上居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-card {
  
  padding-top: 15px;
  padding-bottom: 15px;

  /* 让卡片内部元素垂直居中排列 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.el-card:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); /* 鼠标悬停时阴影加深，提供视觉反馈 */
}

.product-name {
  color: #333;
  font-size: 20px; /* 适当增大字体大小，突出产品名称 */
  margin-top: 10px; /* 增加名称与图片的间距 */
  margin-bottom: 5px; /* 增加名称与描述之间的间距 */
  text-align: center; /* 让产品名称在卡片内居中显示 */
}

.product-description {
  color: #666;
  line-height: 1.5;
  text-align: center; /* 让产品描述在卡片内居中显示 */
}

.product-price {
  color: #007BFF;
  font-size: 18px; /* 适当增大字体大小，突出价格 */
  text-align: center; /* 让产品价格在卡片内居中显示 */
  margin-top: 10px; /* 增加价格与描述之间的间距 */
}
</style>